<template>
  <div class="gold-shop-wrap">
    <van-nav-bar title="修改登录密码" left-arrow fixed @click-left="onClickLeft"/>
    <van-cell-group>
      <van-field clearable v-model="passWordCode" label="输入新密码:" placeholder="输入新密码"
                 :type="checked ? '' : 'password'"/>
      <van-field clearable v-model="newPasswordCode" label="确认新密码:" placeholder="确认新密码"
                 :type="checked ? '' : 'password'"/>
    </van-cell-group>
    <div class="text">密码必须是6-18位的英文字母、数字、符号的组合(除空格)，且字母、数字和标点符号至少包含两种</div>
    <van-checkbox v-model="checked" class="login_checkbox" icon-size="16px"
                  checked-color="#ee0a24">显示密码
    </van-checkbox>
    <div class="setup_btn">
      <!-- <van-button type="info" size="large" @click="submit">提交</van-button> -->
      <van-button color="linear-gradient(to right, #FF5851, #E9011B)" size="large" round
                  @click="submit">提交
      </van-button>
    </div>
  </div>
</template>
<script>
import { Dialog } from 'vant'
// import {  NoNull } from '@/tool/validate';
import { MODIFY_PASSWORD } from '@/api/cms'

export default {
  data() {
    return {
      //密码
      passWordCode: '',
      newPasswordCode: '',
      checked: false,
      code: '',
      account: ''
    }
  },
  mounted() {
    window.scrollTo(0, 0)

    this.code = this.$route.query.sms
    this.account = this.$route.query.account
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    //提交新密码
    submit() {
      if (this.passWordCode == '') {
        this.$toast('请输入新密码')
        return
      }
      if (this.newPasswordCode == '') {
        this.$toast('请输入新密码')
        return
      }
      if (this.passWordCode != this.newPasswordCode) {
        Dialog.alert({
          title: '密码修改失败',
          message: '两次密码输入不一致',
          theme: 'round-button',
          confirmButtonText: '确定',
          confirmButtonColor: 'linear-gradient(to right, #FF5851, #E9011B)'
        }).then(() => {

        })
        return
      }
      // 调接口
      let params = {}
      // params['old_password'] = this.passWordCode;
      params['code'] = this.code
      params['password'] = this.newPasswordCode
      // this.$http.post(SEND_CODE + '?' + qs.stringify(params))
      this.$http.post(MODIFY_PASSWORD, params)
          .then(() => {
            this.$toast.success('修改成功')
            localStorage.removeItem('token')
            setTimeout(() => {
              this.$router.push({
                name: 'login'
              })
            }, 1000)
          })
          .finally(() => {
            this.loadBtn = false
          })

    }
  },

}
</script>
<style less="scss" scoped>
.gold-shop-wrap {
  min-height: calc(100vh - 46px);
  padding-top: 46px;
  background: #F2F4F5;
}

::v-deep .van-nav-bar .van-icon {
  color: #333333;
}

::v-deep .van-nav-bar__arrow {
  font-size: 20px;
}

.text {
  width: 95%;
  margin: 0 auto;
  margin-top: 0.24rem;
  font-size: 0.24rem;
  /* font-weight: bold; */
  color: #999999;
}

.login_checkbox {
  width: 98%;
  margin: 0 auto;
  margin-top: 0.2rem;
  font-size: 0.25rem;
}

.setup_btn {
  width: 80%;
  margin: 0 auto;
  margin-top: 2rem;
}
</style>
